<template>
    <div :id="domID" v-show="!isDisposed" style="width: 100%; height: 100%;"></div>
</template>

<script>
    export default {
        props: {
            domID: {
                type: String,
                default: 'charts-dom'
            },
            chartsData: {
                type: Array,
            },
            yAxis_axisLabel_formatter: {
                type: String,
                default: 'USD_0'
            },
            markPoint_formatter: {
                type: String,
                default: 'USD_0'
            },
            seriesName: {
                type: String,
            },
            //判断图表实例是否销毁
            isDisposed: {
                type: Boolean,
                default: false
            },
            //判断图表是否loading
            isLoading: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                myEcharts: '',

            }
        },
        computed: {
        },
        created() {
        },
        mounted() {
        },
        beforeDestroy () {
            if(this.myEcharts){
                this.myEcharts.dispose();
            }
        },
        methods: {
            //图表配置
            Line_charts(){
                this.myEcharts.hideLoading();
                this.$emit('chartsIsLoading', false);

                //提取出value有值的数据，为''或0的剔除掉
                let dateList = [];
                let valueList = [];
                this.chartsData.forEach((item) => {
                    if (item.value && item.value != 0.00 && item.value != "NA") {
                        dateList.push(item.time);
                        //值也要随着下面的情况进行判断
                        if (this.yAxis_axisLabel_formatter == 'USD_2') {
                            valueList.push(parseFloat(item.value).toFixed(2));
                        } else {
                            valueList.push(Math.round(item.value));
                        }
                    }
                });

                //判断y轴的刻度标签的内容格式化——状态：1、美元价钱缩写KM，2、美元价钱小数点后0位，3、美元价钱小数点后两位（通常用于每平方英尺的图表）
                let line_yAxis_axisLabel_formatter;
                if (this.yAxis_axisLabel_formatter == 'USD_KM') {
                    // y轴的刻度标签的内容格式化——美元价钱缩写KM
                    line_yAxis_axisLabel_formatter = (value) => {
                        let KM = '';
                        if (value.toString().length >= 7) {
                            KM = (value / 1000000).toFixed(1) + 'M'
                        } else {
                            KM = Math.round(value / 1000) + 'k'
                        }
                        return '$' + KM;
                    };
                } else if (this.yAxis_axisLabel_formatter == 'USD_0') {
                    // y轴的刻度标签的内容格式化——美元价钱小数点后0位
                    line_yAxis_axisLabel_formatter = (value) => {
                        return this.$accounting.formatMoney(value, "$", 0);
                    };
                } else if (this.yAxis_axisLabel_formatter == 'USD_2') {
                    // y轴的刻度标签的内容格式化——美元价钱小数点后两位（通常用于每平方英尺的图表）
                    line_yAxis_axisLabel_formatter = (value) => {
                        return this.$accounting.formatMoney(value, "$", 2);
                    };
                }

                //判断最大最小值的文字标签——状态：1、美元价钱缩写KM，2、美元价钱小数点后0位，3、美元价钱小数点后两位（通常用于每平方英尺的图表）
                let line_markPoint;
                if (this.markPoint_formatter == 'USD_KM') {
                    // 最大值最小值——美元价钱缩写KM
                    line_markPoint = {
                        data: [
                            {type: 'max', name: '最大值', symbolSize: 65, itemStyle:{ color: '#f44336'}},
                            {type: 'min', name: '最小值', symbolSize: 65, itemStyle:{ color: '#03a9f4'}}
                        ],
                        label: {
                            formatter: (param) => {
                                let KM = '';
                                if (param.value.toString().length >= 7) {
                                    KM = (param.value / 1000000).toFixed(1) + 'M'
                                } else {
                                    KM = Math.round(param.value / 1000) + 'k'
                                }
                                return '$' + KM;
                            }
                        }
                    };
                } else if (this.markPoint_formatter == 'USD_0') {
                    // 最大值最小值——美元价钱小数点后0位
                    line_markPoint = {
                        data: [
                            {type: 'max', name: '最大值', symbolSize: 65, itemStyle:{ color: '#f44336'}},
                            {type: 'min', name: '最小值', symbolSize: 65, itemStyle:{ color: '#03a9f4'}}
                        ],
                        label: {
                            formatter: (param) => {
                                return this.$accounting.formatMoney(param.value, "$", 0);
                            }
                        },

                    };
                } else if (this.markPoint_formatter == 'USD_2') {
                    // 最大值最小值——美元价钱小数点后两位（通常用于每平方英尺的图表）
                    line_markPoint = {
                        data: [
                            {type: 'max', name: '最大值', symbolSize: 65, itemStyle:{ color: '#f44336'}},
                            {type: 'min', name: '最小值', symbolSize: 65, itemStyle:{ color: '#03a9f4'}}
                        ],
                        label: {
                            formatter: (param) => {
                                return this.$accounting.formatMoney(param.value, "$", 2);
                            }
                        }
                    };
                }


                this.myEcharts.setOption({
                    tooltip: {
                        trigger: 'axis',
                    },
                    // 控制图表摆放位置
                    grid: {
                        left: '15%',
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,//坐标轴两边留白策略
                        data: dateList,
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                            rotate: '45',
                            fontSize: 12
                        },
                        //坐标轴轴线相关设置
                        axisLine: {
                            show: false,
                        },
                        //坐标轴刻度相关设置
                        axisTick: {
                            show: false,
                        },
                    },
                    yAxis: {
                        type: 'value',
                        //坐标轴刻度标签的相关设置
                        axisLabel: {
                            color: '#969696',
                            formatter: line_yAxis_axisLabel_formatter,
                        },
                        //坐标轴轴线相关设置
                        axisLine: {
                            show: false,
                        },
                        //坐标轴刻度相关设置
                        axisTick: {
                            show: false,
                        },
                    },
                    series: [{
                        name: this.seriesName,
                        type: 'line',
                        data: valueList,
                        sampling: 'average',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            width: 2
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#f6fdfb'
                            }, {
                                offset: 0.8,
                                color: '#ddf7ef'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                            shadowBlur: 10
                        },
                        itemStyle: {
                            color: 'rgb(130, 223, 194)',
                            borderColor: 'rgba(130, 223, 194, 0.2)',
                            borderWidth: 12
                        },
                        markPoint: line_markPoint
                    }],
                    color: ['#82dfc2']
                });
            },
        },
        watch: {
            'chartsData':{
                handler: function(chartsData){
                    if(chartsData.length > 0 && !this.isDisposed){
                        // console.log(chartsData, this.isDisposed)

                        this.$nextTick(() => {
                            this.myEcharts = echarts.getInstanceByDom(document.getElementById(this.domID));
                            if (this.myEcharts === undefined) {
                                this.myEcharts = echarts.init(document.getElementById(this.domID));
                            }
                            this.myEcharts.showLoading();
                            this.Line_charts();
                            window.addEventListener('resize', () => {
                                this.myEcharts.resize();
                            });
                        })
                    }
                },
                deep: true
            },
            //是否销毁图表实例
            isDisposed(value) {
                if(value){
                    if(this.myEcharts){
                        this.myEcharts.dispose();
                    }
                    // console.log(this.myEcharts.isDisposed())
                }
            },
            //判断图表是否loading
            isLoading(value) {
                if(value){
                    if(this.myEcharts){
                        this.myEcharts.showLoading();
                    }
                }
            },

        },
        components: {}
    }
</script>

<style scoped lang="less" type="text/less">
</style>
